<template>

  <!--
  查：
     1：定义查询的api
     2:导入查询api
     3:进入页面就调用api
     4:存储数据并渲染
     5：接口调用要与分页器关联
        页码的值与接口传参关联
        页容量的值与接口传参关联
        总数要来自于接口的返回值
        页码改变与页容量改变都要重新调用接口

  增：
    1：创建一个新增弹框组件
    2：在父组件导入注册使用
    3：点击新增打开弹框
    4：完成内部表单处理（布局，表单验证，表单数据等）
    5：定义新增api
    6:导入新增api
    7:点击确定在表单验证通过后调用新增api
      调用成功
        a:关闭弹框
        b:提示
        c:清空表单数据与验证
        d:刷新父级列表

  改：
    1：点击修改打开弹框
    2：数据回显（深拷贝）
    3:在弹框组件内了一个mode
    4:点击修改与编辑都修改mode为相应的值
    5：调整标题
    6：表单等需要调整的就调整一下
    7：定义编辑api
    8:导入编辑api
    9:点击确定分场景调用api
      调用成功
        a:关闭弹框
        b:提示
        c:清空表单数据与验证
        d:刷新父级列表

   删：
     1：点击删除按钮弹出确认框
     2：定义删除api
     3:导入删除api
     4:确认框点击确定按钮时调用删除api
       调用成功
         a:提示
         b:刷新列表
         c:分页器处理？
           1：刷新前页码都加到第一页
           2: 你删除那页没数据了（页码往前移一页），
               场景：当前页只有一条数据，且页码>1
              用法：页码-- 再刷新

    持久化
      1：值改变了就存储到浏览器
      2：初始值读取浏览器存储

    公司设置
      1：封装组件完成公司信息布局
      2：导入注册使用
      3：定义接口api
      4:导入api
      5:调用存储数据并渲染

      为员工分配权限
       1：创建一个弹框组件
       2：导入注册使用
       3：点击分配权限打开弹框(.sync)
       4:导入获取权限列表数据的api
       5:打开弹框时调用api，获取数据
       6：存储并渲染
       7:定义api获取角色详情
       8：导入api
       9:定义一个方法用于调用api获取详情数据
       10：点击分配角色打开弹框时调用
       11：调用成功存储并渲染
       12:定义分配权限api
       13:导入分配权限api
       14:点击确定调用api
       15:调用成功
          a:提示
          b:关闭弹框
          c:关闭弹框要清空数据

 -->

  <div class="setting">
    <el-card>
      <el-tabs>
        <el-tab-pane label="角色管理">
          <el-button class="btn" type="primary" size="small" @click="addEvent">+ 新增角色</el-button>
          <el-table border :data="list">
            <el-table-column label="序号" width="80px">
              <template #default="{$index}">
                <div>
                  {{ (page.page-1)*page.pagesize+$index+1 }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="角色名" sortable prop="name" />
            <el-table-column label="描述" sortable prop="description" />
            <el-table-column label="操作" align="center">
              <template #default="{row}">
                <div>
                  <el-button type="text" @click="permissionEvent(row)">分配权限</el-button>
                  <el-button type="text" @click="editEvent(row)">修改</el-button>
                  <el-button type="text" @click="delEvent(row.id)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <!-- current-page:默认页码 支持.sync
                 page-size：默认页容量（每页多少条）  支持.sync
                 page-sizes：页容量选项
                 total：总条数
                 layout：布局
                 @size-change:页容量改变时触发
                 @current-change：页码改变时触发
            -->
            <el-pagination
              :current-page.sync="page.page"
              :page-sizes="[1,2,5,10,20,100, 200, 300, 400]"
              :page-size.sync="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="sizeChange"
              @current-change="getData"
            />
          </div>

        </el-tab-pane>
        <el-tab-pane label="公司设置" lazy>

          <Info />
        </el-tab-pane>
        <!-- 100个tab切换，对应 100个组件，怎么实现？
            自己写tab怎么实现？
                 xxx:'Info'
                 button  xxx:info
                 button  xxx:info2
                <component :is='xxx'></component>
        -->
      </el-tabs>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 分配权限弹框 -->
    <!-- <SetPermission ref="set" :show-permission="showPermission" @update:showPermission="showPermission=$event" /> -->
    <SetPermission ref="set" :show-permission.sync="showPermission" />
  </div>
</template>
<script>
import { sysRole, sysRoleDelete } from '@/api/setting'
import jsCookie from 'js-cookie'
import Add from './components/add'
// import Info from './components/Info.vue'
import SetPermission from './components/setPermission.vue'
export default {
  components: {
    Add,
    // 异步组件
    Info: () => import('./components/Info.vue'),
    SetPermission
  },
  data() {
    return {
      showPermission: false,
      list: [],
      page: {
        page: 1,
        pagesize: +jsCookie.get('setting-size') || 1
      },
      total: 400
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysRole(this.page)
      this.list = res.data.rows
      this.total = res.data.total
      console.log('角色列表', res)
    },
    // 新增事件
    addEvent() {
      // 打开弹框
      this.$refs.add.show = true
      this.$refs.add.mode = 'add'
    },
    // 编辑事件
    editEvent(row) {
      // 打开弹框
      this.$refs.add.show = true
      // 深拷贝
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.mode = 'edit'
    },
    // 删除事件
    async delEvent(id) {
      await this.$confirm('您确定删除该项吗?', '温馨提示')
      await sysRoleDelete(id)
      this.$message.success('删除成功')
      // this.page.page = 1
      // this.getData()
      if (this.list.length === 1 && this.page.page > 1) {
        this.page.page--
      }
      this.getData()
    },
    // 页容量改变
    sizeChange() {
      this.getData()
      // cookie  localStorage  sessionStorage
      jsCookie.set('setting-size', this.page.pagesize)
    },
    // 分配权限点击
    permissionEvent(row) {
      // 打开弹框
      this.showPermission = true
      // 调用弹框内方法获取权限数据
      this.$refs.set.getData()
      // 获取角色详情的权限数据
      this.$refs.set.getInfo(row.id)
      console.log('row', row)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting{
  padding:15px;
  .btn{
    margin:25px 0 15px 20px;
  }
  .page{
    padding-top:15px;
    text-align: right;
  }
}
</style>
